<template>
  <div class="area-input">
    <el-cascader
        size="large"
        :options="options"
        :props="props"
        :value="text"
        @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
  props:{
    value: Object
  },
  data(){
    return {
        options:regionData,
        props:{
          value:"label"
        }
    }
  },
  computed:{
    text(){
      return [this.value.province,this.value.city,this.value.county]
    }
  },
  methods:{
    handleChange(value){
      this.value.province = value[0]
      this.value.city = value[1]
      this.value.county = value[2]
      // this.$emit("change",value)
    }
  }
}
</script>

<style scoped>

</style>